<template>
  <div class="search-container">
    <!-- 搜索组件一级路由   $router.back()返回上一个页面-->
    <van-nav-bar left-arrow title="搜索中心" @click-left="$router.back()">
    </van-nav-bar>

    <!-- https://youzan.github.io/vant/#/zh-CN/search -->
    <van-search
      @search="toResult"
      placeholder="请输入搜索关键词"
      shape="round"
      v-model.trim="keyword"
      @input="SEARCH"
    >
      <template #action>
        <div>搜索</div>
      </template>
    </van-search>

    <!-- 联想建议 -->
    <van-cell-group>
      <van-cell
        v-for="(item, index) in heightLight"
        :key="index"
        icon="search"
        @click="clickToResult(index)"
      >
        <!-- 使用插槽来自定义渲染内容 -->
        <template #title>
          <div v-html="item"></div>
        </template>
      </van-cell>
    </van-cell-group>
    <!-- /联想建议 -->
  </div>
</template>

<script>
import { getSearchSuggestion } from '../../../api/search'
export default {
  name: 'search',
  data () {
    return {
      keyword: '', // 搜索关键字
      //   联想词数组
      options: [],
      timeoutId: undefined,
      //   节流默认
      canSearch: true
    }
  },
  methods: {
    //   联想词跳转
    clickToResult (index) {
      this.$router.push({ path: '/result', query: { q: this.options[index] } })
    },
    //   回车跳转
    toResult () {
      if (this.keyword !== '') {
        this.$router.push({ path: '/result', query: { q: this.keyword } })
      }
    },
    SEARCH () {
      //     // 节流方法
      //       if (this.keyword === '') {
      //     // 清空默认的提示
      //     this.options = []
      //     // 空的时候什么都不做
      //     return
      //   }
      //   if (this.canSearch === true) {
      //     // 阻断下一次搜索
      //     this.canSearch = false
      //     // 可以搜索 就搜索
      //     // 调用接口
      //     getSearchSuggestion({ q: this.keyword }).then(res => {
      //       console.log('res:', res)
      //       this.options = res.data.data.options
      //       // 定时器 取反布尔值
      //       setTimeout(() => {
      //         this.canSearch = true
      //       }, 500)
      //     })
      //   }

      //   判断定时器有没有开
      if (this.timeoutId !== undefined) {
        clearTimeout(this.timeoutId)
      }
      //   函数防抖
      this.timeoutId = setTimeout(() => {
        // 防抖方法
        if (this.keyword === '') {
          this.options = []
          return
        }
        getSearchSuggestion({ q: this.keyword }).then(res => {
          this.options = res.data.data.options
        })
      }, 500)
    }
  },
  computed: {
    //   计算属性，计算文字高亮
    // 新方法map：
    heightLight () {
      // 循环联想数组
      return this.options.map(v => {
        //   replace：替换字符串内容
        return v.replace(
          this.keyword,
          `<span style="color:red">${this.keyword}</span>`
        )
      })
    }
    // 老方法forEach：
    // heightLight () {
    //   //   定义一个新数组存放高亮后的文字
    //   const opt = []
    //   // 循环联想数组
    //   this.options.forEach(v => {
    //     //   replace：替换字符串内容
    //     const nV = v.replace(
    //       this.keyword,
    //       `<span style="color:red">${this.keyword}</span>`
    //     )
    //     opt.push(nV)
    //   })
    //   return opt
    // }
  }
}
</script>

<style lang="less">
.search-container {
  .van-nav-bar {
    background-color: #3296fa;
    .van-nav-bar__title {
      color: white;
    }
    .van-icon {
      color: white;
    }
  }
}
</style>
